<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<script type="text/javascript">
        window.onload = function(){
        	var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');

            oBtn.onclick = function(){
                var aLi = oUl.getElementsByTagName('li');

                //排序，先找到最小的，剩下的再比较，依次把每次比较中最小的数排到后面 小->大
                //声明一个空数组
                var arr = [];

                //循环li,把li存到数组里面
                for(var i=0;i<aLi.length;i++){
                    arr[i] = aLi[i];
                }

                //对数组arr进行排序
                arr.sort(function(li1,li2){
                    //比较的实际上是li.innerHTML里面的值大小
                    var n1 = parseInt(li1.innerHTML);
                    var n2 = parseInt(li2.innerHTML);

                    return n1-n2;
                });

                //把排好序的arr重新添加到ul中
                for(var i=0;i<arr.length;i++){
                    alert('该把'+arr[i].innerHTML+"插入到最后");
                    oUl.appendChild(arr[i]);
                }
            };

        };
	</script>
</head>
<body>
   
    
    <input id="btn1" type="button" value="排序" />
    <ul id="ul1">
        <li>2</li>
        <li>5</li>
        <li>1</li>
        <li>6</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>